在這邊我會一起講解這一 part 裡面的組件，由於 App Bar 的部分之前已先講解這邊就不再提及。

Paper

這個組件很常出現在前面的範例當中，其實跟他的命名一樣，希望他能保有紙張的特性，預設的情況下是有 borderRadius: 5px的，如果想要拿掉要下 square，它本質上就是一個 div 給予圓角及陰影。

<Paper />
<Paper elevation={3} />
<Paper variant="outlined" square />

Card

這個組件可以快速幫你做出一張卡片的效果，外層為 Card 組件封包，內層由 CardContent & CardAction 兩個組成，content 通常用來擺資訊，action 通常來擺按鈕。

<Card>
  <CardContent>
    <Typography variant="h5" component="h2">
      基德
    </Typography>
    <Typography variant="body2" component="p">
      並沒有
    </Typography>
  </CardContent>
  <CardActions>
    <Button size="small">Learn More</Button>
  </CardActions>
</Card>

當然卡片裡面的內容可以照自己的需求去修改，這部分的話就請到官方文件去看詳細範例吧!

Accordion

這個組件就有使用到 collapse 的概念，算是套包組吧。

<Accordion>
  <AccordionSummary
    expandIcon={<ExpandMoreIcon />}
    aria-controls="panel1a-content"
    id="panel1a-header"
  >
    <Typography className={classes.heading}>Accordion 1</Typography>
  </AccordionSummary>
  <AccordionDetails>
    <Typography>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
      sit amet blandit leo lobortis eget.
    </Typography>
  </AccordionDetails>
</Accordion>

基本上一個 accordion 會是一個選項，所以要控制的話只要在最外層的 Accordion 去下 onChange function就可以控制了。
其他自訂的方法一樣請到官方文件上查詢。

那麼今天的內容就到這邊，明天的話會講解 Feedback 的部分。